import React from 'react';
import { Card, Row, Col, Space, Input, Select, Button } from 'antd';
import { SearchOutlined, ReloadOutlined, ExportOutlined, PlusOutlined } from '@ant-design/icons';

const { Search } = Input;
const { Option } = Select;

// 筛选项配置
export interface FilterOption {
  key: string;
  label: string;
  placeholder: string;
  options: Array<{
    value: string;
    label: string;
  }>;
  width?: number;
}

// 搜索筛选栏属性
export interface SearchFilterBarProps {
  // 搜索相关
  searchValue?: string;
  searchPlaceholder?: string;
  onSearch?: (value: string) => void;
  
  // 筛选相关
  filters?: Record<string, any>;
  filterOptions?: FilterOption[];
  onFilterChange?: (key: string, value: string) => void;
  
  // 操作按钮
  loading?: boolean;
  onRefresh?: () => void;
  onExport?: () => void;
  onAdd?: () => void;
  addButtonText?: string;
  
  // 批量操作
  selectedCount?: number;
  batchActions?: React.ReactNode;
  
  // 自定义操作
  extraActions?: React.ReactNode;
}

// 搜索筛选栏组件
const SearchFilterBar: React.FC<SearchFilterBarProps> = ({
  searchValue = '',
  searchPlaceholder = '请输入搜索关键词',
  onSearch,
  filters = {},
  filterOptions = [],
  onFilterChange,
  loading = false,
  onRefresh,
  onExport,
  onAdd,
  addButtonText = '添加',
  selectedCount = 0,
  batchActions,
  extraActions,
}) => {
  return (
    <Card style={{ marginBottom: '16px' }}>
      <Row gutter={16} align="middle">
        <Col flex="auto">
          <Space wrap>
            {/* 搜索框 */}
            {onSearch && (
              <Search
                placeholder={searchPlaceholder}
                allowClear
                style={{ width: 300 }}
                value={searchValue}
                onSearch={onSearch}
                enterButton={<SearchOutlined />}
              />
            )}
            
            {/* 筛选选择器 */}
            {filterOptions.map((option) => (
              <Select
                key={option.key}
                placeholder={option.placeholder}
                style={{ width: option.width || 150 }}
                allowClear
                value={filters[option.key] || undefined}
                onChange={(value) => onFilterChange?.(option.key, value || '')}
              >
                {option.options.map((item) => (
                  <Option key={item.value} value={item.value}>
                    {item.label}
                  </Option>
                ))}
              </Select>
            ))}
          </Space>
        </Col>
        
        <Col>
          <Space>
            {/* 基础操作按钮 */}
            {onAdd && (
              <Button type="primary" icon={<PlusOutlined />} onClick={onAdd}>
                {addButtonText}
              </Button>
            )}
            
            {onExport && (
              <Button icon={<ExportOutlined />} onClick={onExport}>
                导出数据
              </Button>
            )}
            
            {onRefresh && (
              <Button
                icon={<ReloadOutlined />}
                onClick={onRefresh}
                loading={loading}
              >
                刷新
              </Button>
            )}
            
            {/* 批量操作 */}
            {selectedCount > 0 && batchActions}
            
            {/* 自定义操作 */}
            {extraActions}
          </Space>
        </Col>
      </Row>
    </Card>
  );
};

export default SearchFilterBar;
